<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/static/css/index_style.css"/>
		<link rel="stylesheet" type="text/css" href="/static/css/singer_style.css"/>
		<link rel="stylesheet" type="text/css" href="/static/css/singer.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="icon" href="/static/images/favicon.ico">

        <style>
            .pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
            .pagenation a{display:inline-block;border:1px solid #fafafa;background-color: #fafafa;font-size:12px;padding:0 21px;color:#666;margin:5px;height: 50px;line-height: 50px}

            .pagenation .active{background-color: #272727;color:#43a200}
        </style>

	</head>
	<iframe id="mainiframe" src="{{ url('index:index') }}" width="100%" height="142px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" style="display: block;"></iframe>
	<body id="singer">

        {% if user_token or username %}
		<div class="singer_push">

         <div class="singer_push_tab">
                <span href="javascript:;" class="singer_push_tab__item singer_push_tab__item--on">我关注的歌手</span>
                <!--a href="javascript:;" class="singer_push_tab__item">我常听的歌手</a-->
            </div>
            <div class="commend_list list_control mod_slide singer_push_slide">
            {% if follow_singer_list %}
                <ul class="singer_push_list slide__list" style="left: 0px;">
                {% for x in follow_singer_list %}
                    <li class="singer_push_list__item slide__item "><a href="/singers_detail/?id={{ x.singer_id }}" onclick="setStatCookie&amp;&amp;setStatCookie();" class="singer_push_list__link js_singer" data-stat="y_new.singerlist.header.singerpic" data-singermid="001fNHEf1SFEFN" data-singerid="13948" title="{{ x.singer_name }}"><img onerror="this.src=&#39;//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=2592000&#39;;this.onerror=null;" src="{{ x.singer_pic }}" alt="{{ x.singer_name }}" class="singer_push_list__pic"><i class="singer_push_list__cover"></i></a></li>
                {% endfor %}
                </ul>
            {% else %}
                <ul class="singer_push_list slide__list" style="left: 0px;">

                {% for x in singer_follow %}
                    <li class="singer_push_list__item slide__item "><a href="/singers_detail/?id={{ x.artist_id }}" onclick="setStatCookie&amp;&amp;setStatCookie();" class="singer_push_list__link js_singer" data-stat="y_new.singerlist.header.singerpic" data-singermid="001fNHEf1SFEFN" data-singerid="13948" title="{{ x.artist_name }}"><img onerror="this.src=&#39;//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=2592000&#39;;this.onerror=null;" src="{{ x.artist_img }}" alt="{{ x.artist_name }}" class="singer_push_list__pic"><i class="singer_push_list__cover"></i></a></li>
                {% endfor %}

                </ul>
            {% endif %}

            </div>

		</div>
        {% else %}
        <div class="singer_push">

			<div class="div_contorl singer_inner " style="margin:0 auto">
				<h2></h2>
				<div></div>
				<a href="/login">立即登录<span></span></a>
			</div>

		</div>
        {% endif %}

		<div class="div_contorl singer_main">
			<div class="div_contorl main_title">
				<div class="content_list">
					<a href="JavaScript:;" class="active">热门</a>
					<a href="JavaScript:;">A</a>
					<a href="JavaScript:;">B</a>
					<a href="JavaScript:;">C</a>
					<a href="JavaScript:;">D</a>
					<a href="JavaScript:;">E</a>
					<a href="JavaScript:;">F</a>
					<a href="JavaScript:;">G</a>
					<a href="JavaScript:;">H</a>
					<a href="JavaScript:;">I</a>
					<a href="JavaScript:;">J</a>
					<a href="JavaScript:;">K</a>
					<a href="JavaScript:;">L</a>
					<a href="JavaScript:;">M</a>
					<a href="JavaScript:;">N</a>
					<a href="JavaScript:;">O</a>
					<a href="JavaScript:;">P</a>
					<a href="JavaScript:;">Q</a>
					<a href="JavaScript:;">R</a>
					<a href="JavaScript:;">S</a>
					<a href="JavaScript:;">T</a>
					<a href="JavaScript:;">U</a>
					<a href="JavaScript:;">V</a>
					<a href="JavaScript:;">W</a>
					<a href="JavaScript:;">X</a>
					<a href="JavaScript:;">Y</a>
					<a href="JavaScript:;">Z</a>
					<a href="JavaScript:;">#</a>
				</div>
				<div class="content_list">
					<a href="JavaScript:;" class="active">全部</a>
					<a href="JavaScript:;">内地</a>
					<a href="JavaScript:;">港台</a>
					<a href="JavaScript:;">欧美</a>
					<a href="JavaScript:;">日本</a>
					<a href="JavaScript:;">韩国</a>
					<a href="JavaScript:;">其他</a>
				</div>
				<div class="content_list">
					<a href="JavaScript:;" class="active">全部</a>
					<a href="JavaScript:;">男</a>
					<a href="JavaScript:;">女</a>
					<a href="JavaScript:;">组合</a>
				</div>
				<div class="content_list">
					<a href="JavaScript:;" class="active">全部</a>
					<a href="JavaScript:;">流行</a>
					<a href="JavaScript:;">嘻哈</a>
					<a href="JavaScript:;">摇滚</a>
					<a href="JavaScript:;">电子</a>
					<a href="JavaScript:;">民谣</a>
					<a href="JavaScript:;">R&amp;B</a>
					<a href="JavaScript:;">民歌</a>
					<a href="JavaScript:;">轻音乐</a>
					<a href="JavaScript:;">爵士</a>
					<a href="JavaScript:;">古典</a>
					<a href="JavaScript:;">乡村</a>
					<a href="JavaScript:;">蓝调</a>
				</div>
			</div>
			<div class="div_contorl main_singer_list">
                {% if page_num == 1 %}
				<ul>
                    {% for first in first_lists %}
					<li>
						<div class="singer_list_div">
							<a href="/singers_detail/?id={{ first.singer_id }}"><img src="{{ first.singer_pic }}" alt="歌手" /></a>
							<h3><a href="JavaScript:;">{{ first.singer_name }}</a></h3>
						</div>
					</li>
                    {% endfor %}
				</ul>
                    {% else %}
                    &#8194
                {% endif %}
			</div>
			<div class="div_contorl singer_text_list">
				<ul>

                    {% for x in page_orders %}
					<li><a href="/singers_detail/?id={{ x.artist_id }}">{{ x.artist_name }}</a></li>
                    {% endfor %}


				</ul>

			</div>


              <div class="pagenation">
                    <div id="pagination" class="page"></div>
                </div>

{#			<div class="singer_page">#}
{#				<a href="JavaScript:;" class="active">1</a><a href="JavaScript:;">2</a><a href="JavaScript:;">3</a><a href="JavaScript:;">4</a>#}
{#			</div>#}
		</div>
		<iframe src="{{ url('index:footer') }}" width="100%" height="600px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" style="display: block;"></iframe>
	</body>
	<script src="/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>

    <script>
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{ total_page }},
            callback: function (current) {
                location.href = '/singers/' + current + '/';
            }
        })
    });
</script>
	
</html>
